import React, { useEffect, useState } from "react";
import { Layout, theme } from "antd";
import { AIMessageContent } from "../chat/AiMessageContent.tsx";
import { AiConversations } from "../chat/AiConversations.tsx";
import { ConversationMenuPayload, getConversationMenus } from "../../service/apis.ts";
import { FeishuDocs } from "../chat/FeishuDocs.tsx";
import { FileUpload } from "../chat/FileUpload.tsx";
import { useMediaQuery } from 'react-responsive';

const { Header, Content, Sider } = Layout;

export const Home: React.FC = () => {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const [conversations, setConversations] = useState([] as ConversationMenuPayload[]);
    const [conversationId, setConversationId] = useState("");

    const isMobile = useMediaQuery({ maxWidth: 767 });

    useEffect(() => {
        getConversationMenus().then((res) => {
            if (res.content) {
                setConversations(res.content);
                setConversationId(res.content.length === 0 ? 'defaultId':  res.content[0].conversationId);
            }
        });
    }, []);

    const onConversationRemove = (removedId: string) => {
        const updates = conversations.filter(
            (value) => value.conversationId !== removedId,
        );
        setConversations(updates);
        if (conversationId === removedId && conversations.length > 0) {
            setConversationId(conversations[0].conversationId);
        } else {
            setConversationId(conversationId);
        }
    };

    const onTitleUpdate = (convId: string, title: string) => {
        setConversations(
            conversations.map((value) =>
                value.conversationId === convId ? { ...value, title: title } : value,
            ),
        );
    };

    return (
        <Layout style={{ height: "100%" }}>
            <Header>
                <div style={{ color: "white", fontSize: "large" }}>lucifer-cloud-ai</div>
            </Header>
            <Layout>
                {!isMobile && (
                    <Sider width={"20%"}>
                        {conversationId && (
                            <AiConversations
                                conversations={conversations}
                                conversationId={conversationId}
                                setConversationId={setConversationId}
                                setConversations={setConversations}
                                onRemove={onConversationRemove}
                                onTitleUpdate={onTitleUpdate}
                            ></AiConversations>
                        )}
                    </Sider>
                )}
                <Layout style={{ padding: isMobile ? "0" : "0 24px 24px", width: isMobile ? "100%" : "60%" }}>
                    <Content
                        style={{
                            padding: 24,
                            background: colorBgContainer,
                        }}
                    >
                        {conversationId && (
                            <AIMessageContent conversationId={conversationId} />
                        )}
                    </Content>
                </Layout>
                {!isMobile && (
                    <Layout
                        style={{
                            padding: 24,
                            background: colorBgContainer,
                            width: "20%",
                        }}
                    >
                        <Content
                            style={{
                                padding: 0,
                                background: colorBgContainer,
                                height: "20%",
                            }}
                        >
                            <FileUpload />
                        </Content>
                        <Content
                            style={{
                                padding: 0,
                                background: colorBgContainer,
                                height: "80%",
                            }}
                        >
                            <FeishuDocs />
                        </Content>
                    </Layout>
                )}
            </Layout>
        </Layout>
    );
};